<template>
  <div class="home-container">
    <!-- 头部 -->
    <van-nav-bar placeholder title="黑马头条" fixed />
    <!-- 下拉刷新组件 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 上拉加载组件 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- 信息组件 -->
        <Article-info v-for='item in artList' :key="item.id" :title="item.title " :author="item.aut_name" :commNum="item.comm_count" :pubData="item.pubdate" :imgList="item.cover.images"></Article-info>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleAPI } from '@/api/articleAPI.js'
import ArticleInfo from '@/components/Article/ArticleInfo.vue'
import _ from 'lodash'
let fn = null
export default {
  components: { ArticleInfo },
  name: 'Home',
  data() {
    return {
      // 页码值
      page: 1,
      // 每页显示多少条数据
      limit: 10,
      artList: [],
      // 加载状态默认先为true不然刚进页面就会触发load
      loading: true,
      // 是否没有数据加载了
      finished: false,
      // 上拉加载
      refreshing: false
    }
  },

  methods: {
    // 封装获取文章列表
    async initArticleList() {
      const { data: res } = await getArticleAPI(this.page, this.limit)
      // 下拉刷新
      this.artList = [...this.artList, ...res]
      console.log(res)
      // 加载完后把状态改为false
      this.loading = false
      // 如果返回的res数据小于每页显示的数据了那么就说明没有数据展示了
      // 将finished设置为true
      if (res.length < this.limit) this.finished = true
    },
    // 下拉加载处理函数
    onLoad() {
      setTimeout(() => {
        // 页码加一
        this.page++
        // 加载数据
        this.initArticleList()
      }, 500)
    },
    // 上拉刷新处理函数
    onRefresh() {
      setTimeout(() => {
        // 页码等于
        this.page = 1
        // 清空数据列表
        this.artList = []
        // 加载数据
        this.initArticleList()
        // 刷新完成重新将状态设为false
        this.refreshing = false
        // 是否加载完改为false
        this.finished = false
      }, 1000)
    },
    recordTopHandler() {
      // 鲁大师库中的防抖
      return _.debounce(
        () => {
          // 在路由自定义信息里的top接收当前页面滚动y轴的值
          this.$route.meta.top = window.scrollY
        },
        50,
        { trailing: true }
      )
    }
  },
  created() {
    this.initArticleList()
  },
  activated() {
    fn = this.recordTopHandler()
    window.addEventListener('scroll', fn)
  },
  deactivated() {
    window.removeEventListener('scroll', fn)
  }
}
</script>

<style lang="less" scoped>
// .home-container {
//   padding: 46px 0 50px 0;
// }
// /deep/ .van-nav-bar {
//   background-color: #007bff;
// }
// /deep/ .van-nav-bar__title {
//   color: white;
// }
</style>
